import React, { useState, useEffect } from 'react';
import styles from "./table.module.less";

const TableView = ({ tableData, onchange }) => {
  const [header, setHeader] = useState([])
  const [namelist, setNamelist] = useState(["mean_value", "number_total", "name", "profit_total"])

  useEffect(() => {
    if (tableData?.header) {
      const headerList = Object.keys(tableData?.header).filter((item, index) => !namelist.includes(item));
      setHeader(headerList)
    }
  }, [namelist, tableData])
  return (
    <div className={styles.table_gbig_box}>
      <div className={styles.content_box}>
        <div className={styles.table_container}>
            <table className={styles.table_gbig_box}>
                <thead>
                  <tr>
                      <th onClick={() => onchange("name")} className={styles.header_name} rowSpan="2">{tableData?.header?.name}</th>
                      <th onClick={() => onchange("number_total")}>总计</th>
                      <th onClick={() => onchange("profit_total")}>总计</th>
                      <th onClick={() => onchange("mean_value")}>均值</th>
                      {header.map((item, index) => {
                        return <th key={index} colSpan="2">{item}</th>
                      })}
                  </tr>
                  <tr>
                      <th rowSpan="2">次数</th>
                      <th rowSpan="2">利润</th>
                      <th rowSpan="2">万元/次数</th>
                      {header.map((item, index) => {
                        return (
                          <React.Fragment key={index}>
                            <th rowSpan="2">次数</th>
                            <th rowSpan="2">利润</th>
                          </React.Fragment>
                        )
                      })}
                  </tr>
                </thead>
                <tbody>
                  {(tableData?.result || []).map((item, index) => (
                    <tr key={index}>
                      <td>{item.name}</td>
                      <td>{item.number_total}</td>
                      <td>{item.profit_total}</td>
                      <td>{item.mean_value}</td>
                      {header.map((val, i) => {
                        return (
                          <React.Fragment key={i}>
                            <td>{item?.[val]?.[0] || '-'}</td>
                            <td>{item?.[val]?.[1] || '-'}</td>
                          </React.Fragment>
                        )
                      })}
                    </tr>
                  ))}
                  <tr>
                    <td>总计</td>
                    <td>{tableData?.total?.number_total}</td>
                    <td>{tableData?.total?.profit_total}</td>
                    <td>{tableData?.total?.mean_value}</td>
                    {(header || []).map((item, index) => {
                      return (
                        <React.Fragment key={index}>
                          <td>{tableData?.total?.[item]?.[0] || '-'}</td>
                          <td>{tableData?.total?.[item]?.[1] || '-'}</td>
                        </React.Fragment>
                      )
                    })}
                  </tr>
                  <tr>
                    <td className={styles.total_row}>均值</td>
                    <td colSpan="2" className={styles.total_row}>{tableData?.avg?.mean_value}</td>
                    <td className={styles.total_row}>-</td>
                    {(header || []).map((item, index) => {
                      return <td key={index} className={styles.total_row} colSpan="2">{tableData?.avg?.[item] || ''}</td>
                    })}
                  </tr>
                </tbody>
            </table>
        </div>
      </div>
    </div>
  );
};

export default TableView;